<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/banner.css" />
	</head>
	<body>
		<!-- 轮播图 -->
		<div id="logo">
			<h3><img src="img/24.png" id="btn-previous"></h3>
			<h4><img src="img/23.png" id="btn-next"></h4>
		</div>
	</body>
</html>
<script type="text/javascript">
	// Banner  轮播图
	class Banner {
		//第一步
		constructor(newBox) {
			//轮播图核心索引
			this.index = 0;
			this.oBox = newBox; //backgroundImage被修改
			// 添加背景图片
			this.oBox.style.backgroundImage = "url(img1/" + this.index + ".jpg)";
			this.eventBind();

		}

		//第二步 (设置两个工具函数可以调用)
		//设置Box背景图片
		setBgcImage() {
			this.oBox.style.backgroundImage = "url(img1/" + this.index + ".jpg)";
		}

		// 第三步按钮
		//右边按钮
		next() {
			this.index++;
			if (this.index == 2) {
				this.index = 0;
			}
			this.setBgcImage();
		}

		// 左边按钮
		prev() {
			this.index--;

			if (this.index == -1) {
				this.index = 1;
			}
			this.setBgcImage();
		}

		// 绑定按钮
		eventBind() {
			// 绑定右边按钮
			let oNext = document.querySelector("#btn-next");
			// 绑定左边按钮
			let oPrev = document.querySelector("#btn-previous");

			let that = this;

			oNext.onclick = function() { // 调用prev
				that.next();

			}
			// 循环播放
			setInterval(function() {
				that.next();
				// 调用next
			}, 2000);

			oPrev.onclick = function() { // 调用prev
				that.prev();

			}
		}
	}
	// 获取背景图
	let oBox = document.querySelector("#logo");

	let b = new Banner(oBox);
</script>
